<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>06_HTML5-视频案例练习</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            html,body {
                width: 100%;
                height: 100%;
            }

            video {
                width: 100%;
                height: 100%;
                /* 溢出裁剪 */
                object-fit: cover;
            }

            h1 {
                /* 以下三行代码 是让宽度撑满父盒子 */
                position: absolute;
                left: 0;
                right: 0;

                /* 距离上面150px */
                top: 150px;

                /* 文本居中 */
                text-align: center;

                font-size: 120px;

                color: #fff;

                text-shadow: 0 0 15px #333;


                
            }

        </style>
    </head>
    <body>
        <video src="./source/bg/coverr-boat-near-coast-1567677579626.mp4"
               controls
               muted
               autoplay
               loop
        ></video>

        <h1>舒适的生活</h1>
    </body>
</html>